<template>
  <div
      v-if="props.modelValue"
      style="
      background-color: #fff;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
    "
  >
    <!-- <div style="height: 80%; display: flex; justify-content: center; margin-top: 5%"> -->
    <div style="width: 100%; height: 100%">
      <iframe style="width: 100%; height: 100%" :src="abnormalIFrameUrl"/>
    </div>
    <!-- <el-icon @click="closeDialog" style="font-size: 45px; color: black; cursor: pointer">
        <Close />
      </el-icon> -->
    <!-- </div> -->
  </div>
</template>
<script setup>
import {onMounted, ref, reactive, defineProps, defineEmits, computed} from 'vue'
import {Close} from '@element-plus/icons-vue'

const showAbnormalIFrame = ref(false)

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  abnormalIframeParam: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
  emit('update:modelValue', false)
}

const abnormalIFrameUrl = computed(() => {
  return `${import.meta.env.VITE_CQ_SERVER_URL}/?billFormId=${props.abnormalIframeParam}&type=list`
  // return `https://test-sit-cangqiong.wens.com.cn/?billFormId=${props.abnormalIframeParam}&type=list`
})
</script>

<style scoped lang="scss"></style>
